<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link href="../../css/video-js.css" rel="stylesheet" />

    <style media="screen">
        header {
            position: absolute;
            z-index: 100;
            width: 100%;
        }

        .span_right {
            position: absolute;
            right: 0;
            width: 4rem;
            text-align: right;
            padding-right: .5rem;
            font-size: 0.75rem;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="lesson_app" style="display:none;" v-show="true">
        <header v-if="coursewareType === 'MP3' || coursewareType === 'PPT'">
            <div v-if="showBackBut">
                <span tapmode @click="goBack()" class="left"><i class="icon_back_white"></i></span>
            </div>
        </header>
        <div :style="{'height': height + 'px'}" class="lesson_study_container">
            <div v-if="coursewareType === 'MP3'" class="lesson_audio">
                <img v-if="coursewareType === 'MP3'&&showBackBut" src="../../image/video_top.png" alt=""
                    style="width:100%;position:absolute;top:0;left:0;">
                <div :style="'background: #f3f3f3 url(\''+ imageBasePath + detail.courseImg +'\') no-repeat top;background-size: cover;'"
                    @click="showTheBackBut()">
                    <div class="icon_record"></div>
                </div>

                <div class="bar">
                    <span @click="audioStartOrPause()" class="play_s_btn">
                        <i v-if="audioPlaying" class="icon_pause"></i>
                        <i v-if="!audioPlaying" class="icon_play_s"></i>
                    </span>
                    <div @touchstart="touchstart($event)" @touchmove="touchmove($event)" @touchend="touchend()"
                        class="video_progress">
                        <div class="bg"></div>
                        <div class="pro_bar" :style="'width:' + (nowAudioDuration*1000/audioDuration)*100 + '%'"></div>
                    </div>
                    <span class="time">{{nowAudioDuration | secondToTime}}/{{audioDuration / 1000 |
                        secondToTime}}</span>
                </div>
                <video  id="audioContainer" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%" />
            </div>
            <div v-if="coursewareType === 'PPT'" class="lesson_ppt">
                <div class="swiper-container">
                    <img v-if="coursewareType === 'PPT'&&showBackBut" src="../../image/video_top.png" alt=""
                        style="width:100%;position:absolute;top:0;left:0;z-index:100;">
                    <div class="swiper-wrapper">
                        <div v-for="item of pptList" class="swiper-slide ppt_slide_one" @click="showTheBackBut()">
                            <img :src="imageBasePath + item.filePath"
                                onerror="this.src=''">
                        </div>
                    </div>
                </div>
                <span tapmode @click="prevPPT()" class="prev">&nbsp;</span>
                <span tapmode @click="nextPPT()" class="next">&nbsp;</span>
                <div class="state">
                    <div v-if="study" class="ppt_progress">
                        <div class="ppt_bar" :style="'width:' + pptProgerss + '%'"></div>
                    </div>
                    {{swiperActiveIndex+'/'+pptList.length}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span v-if="!isPptFull"
                        @click="pptFullScreen()">[全屏显示]</span><span v-if="isPptFull"
                        @click="cancelPptFullScreen()">[取消全屏]</span>
                </div>

            </div>
        </div>
        <div v-if="!isPptFull" class="info ui_border_b">
            <div>{{nodeName}}</div>
            <!-- <p>{{nodeName}}</p> -->
            <p>
                <span v-if="watchFinished"
                    style="font-size:0.55rem;color:#999999;margin-right:0.1rem;">本集学习进度100%</span>
                <span v-else
                    style="font-size:0.55rem;color:#999999;margin-right:0.1rem;">本集学习进度{{(showRate*100).toFixed(0)}}%</span>
                <span tapmode class="span_right">
                    <img v-if="isCollect === 1" src="../../image/c_collect_courseware.png" alt="取消点赞" style="width:1rem"
                        @click="cancelCollectCourseWare()">
                    <img v-if="isCollect === 0" src="../../image/collect_courseware.png" alt="点赞" style="width:1rem"
                        @click="collectCourseWare()">
                </span>
            </p>
        </div>
        <ul v-if="!isPptFull" class="l_nav ui_border_b">
            <li @click="selectType(0)" :class="{'active': 0 === activeIndex}"><i class="icon_catalog"></i>目录</li>
            <li @click="selectType(1)" :class="{'active': 1 === activeIndex}"><i class="icon_detail"></i>简介</li>
            <li @click="selectType(2)" :class="{'active': 2 === activeIndex}"><i class="icon_comment"></i>评论</li>
        </ul>
        <spinner v-if="!detail.courseName&&!isPptFull"></spinner>
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script src="../../script/layer_mobile/layer.js"></script>
    <script src="../../script/video.min.js"></script>

    <script type="text/javascript">
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (fn) { setTimeout(fn(), 20) };
        var audioPlayer;

        var swiper;
        var lastsecond = 0;
        new Vue({
            el: '#lesson_app',
            data: {
                imageBasePath: imageBasePath,
                fileBasePath: imageBasePath,
                coursewareFilePath: '',
                pName: '',
                cName: '',
                nodeName: '',
                courseId: '',
                detail: {},
                coursewareId: '',
                coursewareType: '',
                pptList: [],
                pptSliding: false,
                back: false,
                click: false,
                loaded: false,
                activeIndex: 0,
                height: 200,
                isFullScreen: false,
                progress: 0,
                pptProgerss: 100,
                pptLearnTime: 8,
                swiperActiveIndex: 1,
                audioPlaying: false,
                audioPlayed: false,
                audioDuration: 0,
                isAudioSeek: false,
                nowAudioDuration: 0,
                vedioDuration: 0,
                nowVedioDuration: 0,
                isSetFinished: false,
                isCollect: 0,
                collectedHistoryId: '',
                // come form study or course
                study: true,
                pause: false,
                watchFinished: false,
                showRate: 0,
                showBackBut: true,
                flag: null,
                isPptFull: false,
                sliding: false,
                orgHeight: 0,
                old_percent: 0,
                apiready: false,
                videoMaskIsOpened: false
            },
            watch: {
                swiperActiveIndex: function () {
                    var $this = this;
                    if (!$this.study) return;
                    if ($this.watchFinished) return;
                    if ($this.progress === $this.pptList.length) return;
                    $this.showRate = ($this.swiperActiveIndex / $this.pptList.length);  //设置进度
                    if ($this.swiperActiveIndex === $this.pptList.length) {
                        $this.setFinished()
                    } else {
                        $this.setLearnedHistory($this.swiperActiveIndex)
                    }
                },
                nowAudioDuration: function () {
                    var $this = this;
                    if (!$this.study) return;
                    if ($this.watchFinished) return;
                    if (!$this.nowAudioDuration) return;
                    $this.showRate = ($this.nowAudioDuration * 1000 / $this.audioDuration);  //设置进度
                    if ($this.nowAudioDuration * 1000 >= ($this.audioDuration - 2000)) {
                        $this.setFinished()
                    } else {
                        if ($this.nowAudioDuration * 1000 < $this.progress) return;
                        var second = Math.floor($this.nowAudioDuration - $this.progress / 1000);
                        if (second === lastsecond) return;
                        lastsecond = second;
                        if (second % 5 === 0) {
                            $this.setLearnedHistory($this.nowAudioDuration * 1000)
                        }
                    }
                },
                nowVedioDuration: function () {
                    var $this = this;
                    if (!$this.study) return;
                    if ($this.watchFinished) return;
                    if (!$this.nowVedioDuration) return;
                    $this.showRate = ($this.nowVedioDuration / $this.vedioDuration);  //设置进度
                    if ($this.nowVedioDuration >= ($this.vedioDuration - 2)) {
                        setTimeout(function () {
                            $this.setFinished();
                        }, 2000)
                    } else {
                        if ($this.nowVedioDuration * 1000 < $this.progress) return;
                        var second = Math.floor($this.nowVedioDuration - $this.progress / 1000);
                        if (second === lastsecond) return;
                        lastsecond = second;
                        if (second % 60 === 0) {
                            $this.setLearnedHistory($this.nowVedioDuration * 1000)
                        }
                    }
                }
            },
            mounted: function () {
                var $this = this;
                apiready = function () {
                    $this.apiready = true;
                    $this.courseId = api.pageParam.courseId || '';
                    $this.coursewareId = api.pageParam.coursewareId || '';
                    //$this.study = !!api.pageParam.study;
                    $this.back = !!api.pageParam.back;
                    $this.height = api.winWidth / 16 * 9;
                    $this.init();
                    $this.addKeyBackEventListener();
                    $this.addSwipeEventListener();
                    api.addEventListener({
                        name: 'study_new_chapter_event'
                    }, function (ret, err) {
                        // return if this chapter is learning
                        if ($this.isFullScreen) {
                            $this.cancelFullScreen();
                        }
                        if (audioPlayer) {
                            audioPlayer.pause();
                        }
                        if ($this.courseId == ret.value.courseId && $this.coursewareId == ret.value.coursewareId) return;
                        //如果是已学习完的，则直接退出
                        if ($this.isSetFinished || $this.watchFinished) {
                        } else {
                            //切换之前先保存学习进度,不考虑finish因为学习完成会马上setfinish.
                            if ($this.coursewareType === 'MP4') {
                                $this.setLearnedHistory($this.nowVedioDuration * 1000);
                            } else if ($this.coursewareType === 'MP3') {
                                $this.setLearnedHistory($this.nowAudioDuration * 1000);
                            } else if ($this.coursewareType === 'PPT') {
                                $this.setLearnedHistory($this.swiperActiveIndex);
                            }
                        }
                        $this.courseId = ret.value.courseId;
                        $this.coursewareId = ret.value.coursewareId;
                        $this.init();
                    });

                    api.addEventListener({
                        name: 'update-nowVideoDuration'
                    }, function (ret, err) {
                        if (ret.value.duration) {
                            $this.nowVedioDuration = ret.value.duration;
                        }
                    });

                    api.addEventListener({
                        name: 'study-video-message'
                    }, function (ret) {
                        if (ret.value) {
                            var msg = ret.value.msg;

                            msgUtil.message(msg);
                        }
                    });
                }
            },
            methods: {
                init: function () {
                    var $this = this;
                    //初始化变量
                    $this.isSetFinished = false;
                    $this.coursewareFilePath = '';
                    $this.pName = '';
                    $this.cName = '';
                    $this.nodeName = '';
                    $this.detail = {};
                    $this.coursewareType = '';
                    $this.pptList = [];
                    $this.pptSliding = false;
                    $this.click = false;
                    $this.loaded = false;
                    $this.activeIndex = 0;
                    $this.isFullScreen = false;
                    $this.progress = 0;
                    $this.pptProgerss = 100;
                    $this.pptLearnTime = 8;
                    $this.swiperActiveIndex = 1;
                    $this.audioPlaying = false;
                    $this.audioPlayed = false;
                    $this.audioDuration = 0;
                    $this.isAudioSeek = false;
                    $this.nowAudioDuration = 0;
                    $this.vedioDuration = 0;
                    $this.nowVedioDuration = 0;
                    $this.isSetFinished = false;
                    $this.isCollect = 0;
                    $this.collectedHistoryId = '';
                    $this.study = true;
                    $this.pause = false;
                    $this.watchFinished = false;
                    $this.showRate = 0;
                    $this.showBackBut = true;
                    $this.flag = null;
                    $this.isPptFull = false;
                    $this.sliding = false;
                    $this.orgHeight = 0;
                    $this.old_percent = 0;

                    var detailLoading = msgUtil.loading();
                    post('/client/course/getDetail', {
                        courseId: $this.courseId,
                        coursewareId: $this.coursewareId
                    }, function (ret) {
                        msgUtil.close(detailLoading);
                        if (ret.isSuccess) {
                            $this.coursewareId = ret.data.ccw.coursewareId;
                            $this.isCollect = ret.data.ccw.isCollect;
                            $this.collectedHistoryId = ret.data.ccw.collectedHistoryId;
                            $this.nodeName = ret.data.ccw.coursewareTitle;
                            $this.coursewareType = ret.data.ccw.coursewareType;
                            $this.coursewareFilePath = ret.data.ccw.coursewareFilepath;
                            $this.watchFinished = ($this.study && ret.data.ccw.status === 2);
                            $this.detail = ret.data;
                            $this.fixStatusBar();
                            $this.getLearnedHistory();
                            setTimeout(function () {
                                $this.openFrameGroup($this)
                            }, 0);
                            parseTapmode();
                        } else {
                            msgUtil.message(ret.message);
                            setTimeout(function () {
                                $this.closeWin();
                            }, 2000)
                        }
                    })
                },
                goBack: function () {
                    var $this = this;
                    api.sendEvent({
                        name: 'reloadPlanList'
                    });
                    if ($this.coursewareType === 'PPT' && $this.isPptFull) {
                        $this.cancelPptFullScreen();
                    } else {
                        //如果是已学习完的，则直接退出
                        if ($this.isSetFinished || $this.watchFinished) {
                            $this.closeWin();
                        } else {
                            //退出之前先保存学习进度,不考虑finish因为学习完成会马上setfinish.
                            if ($this.coursewareType === 'MP4') {
                                $this.setLearnedHistory($this.nowVedioDuration * 1000);
                            } else if ($this.coursewareType === 'MP3') {
                                $this.setLearnedHistory($this.nowAudioDuration * 1000);
                            } else if ($this.coursewareType === 'PPT') {
                                $this.setLearnedHistory($this.swiperActiveIndex);
                            }
                            $this.closeWin();
                        }

                    }
                },
                getLearnedHistory: function () {
                    var $this = this;
                    post('/client/course/getLearnedHistory', {
                        "courseId": $this.courseId,
                        "coursewareId": $this.coursewareId
                    }, function (ret) {
                        if (ret.isSuccess) {
                            $this.progress = $this.watchFinished ? 0 : ret.data.progress;
                            $this.initCourseware();
                        }
                    })
                },
                setLearnedHistory: function (progress) {
                    var $this = this;
                    if ($this.watchFinished) return;
                    post('/client/course/setLearnedHistory', {
                        "courseId": $this.courseId,
                        "coursewareId": $this.coursewareId,
                        "progress": progress
                    }, function (ret) {

                    })
                },
                setFinished: function () {
                    var $this = this;
                    if ($this.watchFinished) return;
                    if ($this.isSetFinished) return;
                    $this.isSetFinished = true;
                    $this.watchFinished = true;
                    post('/client/course/setFinished', {
                        "courseId": $this.courseId,
                        "coursewareId": $this.coursewareId,
                        "coursewareType": $this.coursewareType,
                        // "progress": progress,
                        "progress": $this.coursewareType === 'PPT' ? $this.pptList.length : $this.detail.ccw.mediaTime
                    }, function (ret) {
                    })
                },
                nextChapter: function () {
                    var $this = this;

                },
                initCourseware: function () {
                    var $this = this;

                    $this.closeVidoe()

                    if ($this.coursewareType === 'MP4') {
                        $this.nowVedioDuration = $this.progress / 1000;
                        $this.vedioDuration = $this.detail.ccw.mediaTime / 1000;
                        $this.openVideoMask();
                        api.addEventListener({
                            name: 'play_video_evnet'
                        }, function (ret, err) {
                            $this.openVideoPlayer();
                        });

                        api.addEventListener({
                            name: 'pause'
                        }, function (ret, err) {
                            $this.pause = true;
                            api.sendEvent({
                                name: 'comment_pause_video_evnet'
                            });
                        });
                        $this.showRate = ($this.nowVedioDuration / $this.vedioDuration);  //设置进度
                    } else if ($this.coursewareType === 'MP3') {
                        $this.initAudioPlay();
                        //转换成
                        $this.audioDuration = parseInt($this.detail.ccw.mediaTime / 1000) * 1000;
                        if (!$this.watchFinished) {
                            $this.nowAudioDuration = $this.progress / 1000;
                        }
                        api.addEventListener({
                            name: 'comment_pause_video_evnet'
                        }, function (ret, err) {
                            $this.audioPlaying = false;
                            audioPlayer.pause()
                        });
                        api.addEventListener({
                            name: 'pause'
                        }, function (ret, err) {
                            $this.audioPlaying = false;
                            audioPlayer.pause()
                        });
                        $this.showRate = ($this.nowAudioDuration * 1000 / $this.audioDuration);  //设置进度
                    } else if ($this.coursewareType === 'PPT') {
                        if ($this.progress == 0) {
                            $this.swiperActiveIndex = 1;
                        } else {
                            $this.swiperActiveIndex = $this.progress;
                        }
                        if ($this.detail.ccw.pptFilePath && $this.detail.ccw.pptFilePath.length > 0) {
                            $this.pptList = $this.detail.ccw.pptFilePath.map(function (item, index) {
                                if ($this.progress < index) {
                                    return { filePath: item, isStudyed: 0 }
                                } else {
                                    return { filePath: item, isStudyed: 1 }
                                }
                            });
                        }
                        $this.showRate = ($this.swiperActiveIndex / $this.pptList.length);  //设置进度
                        $this.$nextTick(function () {
                            swiper = new Swiper('.swiper-container', {
                                // prevButton:'.prev',
                                // nextButton:'.next',
                                initialSlide: $this.progress > 0 ? $this.progress - 1 : 0,
                                onlyExternal: $this.study,
                                onSlideChangeEnd: function (swiper) {
                                    $this.swiperActiveIndex = swiper.activeIndex + 1;
                                    $this.pptList[swiper.activeIndex].isStudyed = 1;
                                    $this.pptSliding = false;
                                },
                                onInit: function (swiper) {
                                    if ($this.study && ($this.swiperActiveIndex < $this.pptList.length)) {
                                        if (!$this.watchFinished) $this.pptTimer()
                                    }
                                }
                            });
                        });
                    }
                    $this.loaded = true;
                    flag = setTimeout(function () {
                        $this.showBackBut = false
                    }, 3000);
                },
                showTheBackBut: function () {
                    var $this = this;
                    $this.showBackBut = true;
                    flag = setTimeout(function () {
                        $this.showBackBut = false
                    }, 3000);
                },
                pptTimer: function () {
                    var $this = this,
                        time = $this.pptLearnTime,
                        now = Date.now();
                    function timer() {
                        var t = Date.now();
                        if (t - now < (time * 1000)) {
                            $this.pptProgerss = (t - now) / 10 / time;
                            requestAnimationFrame(timer);
                        } else {
                            $this.pptProgerss = 100
                        }
                    }
                    requestAnimationFrame(timer);
                },
                prevPPT: function () {
                    var $this = this;
                    if (!$this.loaded) return;
                    if (!$this.watchFinished) return;

                    if ($this.pptProgerss < 100) return;
                    if ($this.swiperActiveIndex === 1) return;
                    if ($this.pptSliding) return;
                    $this.pptSliding = true;
                    swiper.slidePrev();
                },
                nextPPT: function () {
                    var $this = this;
                    if (!$this.loaded) return;

                    if ($this.swiperActiveIndex === $this.pptList.length) return;
                    if ($this.pptSliding) return;
                    if ($this.pptProgerss < 100) return;
                    $this.pptSliding = true;
                    if ($this.study && !$this.watchFinished) {
                        swiper.slideNext();
                        $this.pptTimer()
                    } else {
                        swiper.slideNext();
                    }
                },
                fixStatusBar: function () {
                    var $this = this;
                    if ($this.coursewareType === 'PPT' || $this.coursewareType === 'MP3') {
                        $this.$nextTick(function () {
                            var header = $api.dom('header');;
                            $api.fixStatusBar(header);
                            sbsm.opened();
                        })
                    }
                },
                openVideoPlayer: function () {
                    var $this = this;
                    if (!$this.loaded) return;
                    $this.showLearnedHistory($this.nowVedioDuration);
                    api.sendEvent({
                        name: 'playing_video_event',
                        extra: {
                            current: $this.nowVedioDuration,
                            allAuration: $this.vedioDuration
                        }
                    });
                    // api.sendEvent({
                    //     name: 'start_play_event'
                    // });

                },
                closeVidoe: function () {
                    var $this = this;

                    if ($this.videoMaskIsOpened) {
                        api.closeFrame({
                            name: 'video_mask_frame'
                        });
                    }
                    $this.videoMaskIsOpened = false;
                },
                openVideoMask: function () {
                    var $this = this;
                    // 注释，会报错 by 胡盈波 2020-12-22
                    // api.closeFrame({
                    //     name: 'video_mask_frame'
                    // });
                    // open video mask
                    $this.videoMaskIsOpened = true;
                    api.openFrame({
                        name: 'video_mask_frame',
                        url: './video_mask_frame.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winWidth,
                            h: $this.height
                        },
                        bounces: false,
                        bgColor: 'rgba(0,0,0,0)',
                        pageParam: {
                            courseImg: $this.detail.courseImg,
                            study: $this.study,
                            watchFinished: $this.watchFinished,
                            coursewareFilePath: $this.coursewareFilePath,
                            courseId: $this.courseId,
                            coursewareId: $this.coursewareId,
                            coursewareType: $this.coursewareType,
                            current: $this.nowVedioDuration,
                            allAuration: $this.vedioDuration
                        }
                    });
                },
                openFrameGroup: function () {
                    var $this = this;
                    api.closeFrameGroup({
                        name: 'studyGroup'
                    });
                    // open frameGroup
                    var lessonTop = document.querySelector('#lesson_app');
                    var height = $api.offset(lessonTop).h;
                    // open frameGroup
                    api.openFrameGroup({
                        name: 'studyGroup',
                        preload: 2,
                        rect: {
                            x: 0,
                            y: height,
                            w: 'auto',
                            h: api.winHeight - height
                        },
                        frames: ['lesson_menu_frm', 'lesson_jiangyi_frm', 'lesson_comment_list_frm'].map(function (item, index) {
                            var param = {
                                courseId: $this.courseId
                            };
                            if (index === 0) {
                                param.curCoursewareId = $this.coursewareId;
                                param.ccwList = JSON.stringify($this.detail.ccwList);
                            }
                            if (index === 1) {
                                param.courseName = $this.detail.courseName
                                param.courseContent = $this.detail.courseContent
                            }
                            return {
                                bounces: true,
                                name: item,
                                url: item + '.html',
                                pageParam: param
                            }
                        })
                    }, function (ret, err) {
                        $this.click ? $this.click = false : $this.activeIndex = ret.index;
                    });
                },
                selectType: function (i) {
                    var $this = this;
                    if ($this.activeIndex === i) return;
                    $this.click = true;
                    $this.activeIndex = i;
                    api.setFrameGroupIndex({
                        name: 'studyGroup',
                        scroll: true,
                        index: i
                    })
                },
                addSwipeEventListener: function () {
                    var $this = this;
                    //禁卡左右滑
                    api.addEventListener({
                        name: 'swipeleft'
                    }, function (ret, err) {
                        //不做任何操作,起到禁止左滑效果。
                    });
                    api.addEventListener({
                        name: 'swiperight'
                    }, function (ret, err) {
                        //不做任何操作,起到禁止右滑
                        //ios下右滑为后退，所以特殊处理一下。
                        if ('ios' === api.systemType)
                            $this.goBack();
                    });
                },
                addKeyBackEventListener: function () {
                    var $this = this;
                    // keyback event
                    api.addEventListener({
                        name: 'keyback'
                    }, function (ret, err) {
                        if ($this.isFullScreen) {
                            $this.cancelFullScreen();
                            return;
                        }
                        if ($this.isPptFull) {
                            $this.goBack();
                            return;
                        }
                        if ($api.getStorage(_.LSEESONCOMMENT)) {
                            $api.rmStorage(_.LSEESONCOMMENT);
                            api.closeFrame({
                                name: 'lesson_comment_frm'
                            })
                        } else {
                            $this.goBack();
                        }
                    });
                },
                cancelPptFullScreen: function () {
                    var $this = this;
                    api.setFullScreen({
                        fullScreen: false
                    });
                    api.setScreenOrientation({
                        orientation: 'portrait_up'
                    });
                    $this.fixStatusBar();
                    api.setFrameGroupAttr({
                        name: 'studyGroup',
                        hidden: false
                    });
                    $this.height = $this.orgHeight;
                    $this.isPptFull = false;
                },
                pptFullScreen: function () {
                    var $this = this;
                    api.setFrameGroupAttr({
                        name: 'studyGroup',
                        hidden: true
                    });
                    api.setFullScreen({
                        fullScreen: true
                    });
                    api.setScreenOrientation({
                        orientation: 'landscape_left'
                    });
                    $this.orgHeight = $this.height;
                    $this.height = api.winWidth;
                    $this.isPptFull = true;
                },
                fullScreen: function () {
                    var $this = this;
                    // hide studyGroup
                    api.setFrameGroupAttr({
                        name: 'studyGroup',
                        hidden: true
                    });
                    $this.isFullScreen = true;
                    api.setFrameAttr({
                        name: 'video_mask_frame',
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winHeight,
                            h: api.winWidth
                        }
                    })
                },
                cancelFullScreen: function () {
                    var $this = this;
                    // show studyGroup
                    api.setFrameGroupAttr({
                        name: 'studyGroup',
                        hidden: false
                    });
                    $this.isFullScreen = false;
                    api.setFrameAttr({
                        name: 'video_mask_frame',
                        rect: {
                            x: 0,
                            y: 0,
                            w: api.winHeight,
                            h: $this.height
                        }
                    });
                    api.sendEvent({
                        name: 'canceled_FullScreen_event'
                    });
                },
                audioStartOrPause: function () {
                    var $this = this;
                    if (!$this.loaded) return;
                    // if ($api.getStorage(_.WIFIONLY) === 'true' && (api.connectionType !== 'wifi')) {
                    //     return msgUtil.toast({
                    //         msg: '请连接到WiFi后学习'
                    //     });
                    // }
                    if (!$this.audioPlaying) {
                        audioPlayer.play();

                        audioPlayer.on('loadedmetadata', function() {//成功获取资源长度
                            audioPlayer.currentTime($this.nowAudioDuration);
                        });
                    } else {
                        audioPlayer.pause()
                    }
                    $this.audioPlaying = !$this.audioPlaying;
                },
                closeWin: function () {
                    api.sendEvent({
                        name: 'reloadPlan'
                    });
                    closeWin();
                },
                collectCourseWare: function () {
                    var $this = this;
                    if ($this.courseId && $this.coursewareId) {
                        post('/client/course/collectCourseWare', {
                            courseId: $this.courseId,
                            coursewareId: $this.coursewareId
                        }, function (ret) {
                            msgUtil.toast({ msg: ret.message });
                            if (ret.isSuccess) {
                                $this.isCollect = 1;
                                $this.collectedHistoryId = ret.data.collectedHistoryId;
                            }
                        })
                    }
                },
                cancelCollectCourseWare: function () {
                    var $this = this;
                    if ($this.courseId && $this.coursewareId) {
                        post('/client/course/cancelCollect', {
                            collectedHistoryId: $this.collectedHistoryId
                        }, function (ret) {
                            msgUtil.toast({ msg: ret.message });
                            if (ret.isSuccess) {
                                $this.isCollect = 0;
                            }
                        })
                    }
                },
                touchstart: function ($event) {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;
                    audioPlayer.pause();
                    $this.audioPlaying = false;
                    $this.sliding = true;

                    if ($this.study && !$this.watchFinished) {
                        var percent = ($event.touches[0].clientX - $event.target.getBoundingClientRect().left) / $event.target.offsetWidth;
                        var p = $this.nowAudioDuration / $this.audioDuration;
                        $this.old_percent = p > $this.old_percent ? p : $this.old_percent;
                        if (percent > $this.old_percent) return;
                    }
                },
                touchmove: function ($event) {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;
                    audioPlayer.pause();
                    $this.audioPlaying = false;
                    $this.sliding = true;

                    var percent = ($event.touches[0].clientX - $event.target.getBoundingClientRect().left) / $event.target.offsetWidth;
                    if ($this.study && !$this.watchFinished) {
                        if (percent > $this.old_percent) {
                            return;
                        }
                    }

                    if (percent >= 0 && percent <= (($this.study && !$this.watchFinished) ? $this.old_percent : 1)) {
                        $this.nowAudioDuration = ($this.audioDuration * percent) / 1000;
                    }

                },
                touchend: function () {
                    var $this = this;
                    if (!$this.apiready) return;
                    if (!$this.watchFinished) return;

                    if (!$this.sliding) return;
                    $this.sliding = false;
                    $this.audioPlayed = false;
                    $this.isAudioSeek = true;
                    audioPlayer.currentTime($this.nowAudioDuration);
                    audioPlayer.play();
                    $this.audioPlaying = true;
                },
                showLearnedHistory: function (lastTime) {
                    var $this = this;

                    // set last play time
                    var seconds = lastTime || 0;

                    seconds = Math.floor(seconds);
                    if (seconds > 1) {
                        var h = Math.floor(seconds / 3600);
                        var m = Math.floor((seconds - h * 3600) / 60);
                        var s = Math.floor(seconds - h * 3600 - m * 60);
                        var time = (h > 0 ? h + '小时' : '') + (m > 0 ? m + '分' : '') + (s > 0 ? s + '秒' : '');

                        layer.open({
                            content: '从' + time + '继续播放'
                            ,skin: 'msg'
                            ,time: 3 //2秒后自动关闭
                        });
                    }

                },
                initAudioPlay: function () {
                    var $this = this;
                    audioPlayer = videojs('audioContainer', {
                        // bigPlayButton: true,
                        language: 'zh-CN',
                        autoplay: false,
                        preload: 'auto',
                        poster: $this.imageBasePath + $this.courseImg,
                        controls: true,
                        webkitPlaysinline: true,
                        playsinline: true,
                        controlBar: false,
                        sources: [{
                            src: videoBasePath + $this.coursewareFilePath,
                            poster: $this.imageBasePath + $this.courseImg,
                            type: 'video/mp4',
                        }]
                    }, function () {

                        audioPlayer.on('ended', function() {//播放结束
                            $this.audioPlaying = false;
                            $this.setFinished();
                        });

                        audioPlayer.on('timeupdate', function () {
                            //当前播放时长(秒)
                            var currentTime = Math.floor(audioPlayer.currentTime());
                            $this.nowAudioDuration = currentTime;
                        });

                    });
                }

            }
        });
    </script>
</body>

</html>
